<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="../../plugins/element-ui/index.css" />
  <link rel="stylesheet" href="../../styles/common.css" />
  <link rel="stylesheet" href="../../styles/page.css" />
</head>
<body>
   <div class="dashboard-container" id="userContract-app">
    <div class="container">
      <div class="tableBar">
        <el-input
          v-model="input"
          placeholder="请输入合同号"
          style="width: 250px"
          clearable
          @keyup.enter.native="handleQuery"
        >
          <i
            slot="prefix"
            class="el-input__icon el-icon-search"
            style="cursor: pointer"
            @click="init"
          ></i>
        </el-input>
        <div class="tableLab">
<!--          <span class="span-btn delBut non" @click="deleteHandle('批量',null)">批量删除</span>-->
<!--          <span class="span-btn blueBug non" @click="statusHandle('1')">批量启售</span>-->
<!--          <span-->
<!--            style="border:none;"-->
<!--            class="span-btn delBut non"-->
<!--            @click="statusHandle('0')"-->
<!--          >-->
<!--              批量停止</span>-->
<!--          <el-button-->
<!--            type="primary"-->
<!--            @click="addSetMeal('add')"-->
<!--          >-->
<!--             添加合同-->
<!--          </el-button>-->
        </div>
      </div>
      <el-table
        :data="tableData"
        stripe
        class="tableBox"
      >
<!--        @selection-change="handleSelectionChange"-->

<!--          <el-table-column-->
<!--                  type="selection"-->
<!--                  width="25"-->
<!--          ></el-table-column>-->
        <el-table-column
          prop="contractId"
          label="合同编号"
        ></el-table-column>

<!--          <template slot-scope="{ row }">-->
<!--            <el-image style="width: auto; height: 40px; border:none;cursor: pointer;" :src="getImage(row.image)" :preview-src-list="[ `/common/download?name=${row.image}` ]" >-->
<!--              <div slot="error" class="image-slot">-->
<!--                <img src="../../images/noImg.png" style="width: auto; height: 40px; border:none;" >-->
<!--              </div> -->
<!--            </el-image>-->
<!--          </template>-->

        <el-table-column
          prop="licensePlate"
          label="车牌号"
        ></el-table-column>
        <el-table-column
          prop="leaPrice"
          label="租赁价格"
        >
<!--          <template slot-scope="scope">-->
<!--            <span>￥{{ scope.row.price/100 }}</span>-->
<!--          </template>-->
        </el-table-column>
        <el-table-column prop="leaDay"label="租赁天数">
<!--          <template slot-scope="scope">-->
<!--            <span>{{ scope.row.status == '0' ? '停售' : '启售' }}</span>-->
<!--          </template>-->
        </el-table-column>
          <el-table-column
                  prop="conDay"
                  label="续租天数"
          >
          </el-table-column>


        </el-table-column>
          </el-table-column>
          <el-table-column
                  prop="wheReturn"
                  label="是否结束"
          >
              <template slot-scope="scope">
                  <span style="margin-right: 10px;">{{ scope.row.wheReturn == '1' ? '已结束' : '进行中' }}</span>
              </template>
          </el-table-column>

          <el-table-column
                  label="操作"
                  width="160"
                  align="center"
          >
              <template slot-scope="scope">
                  <el-button
                          :disabled="scope.row.wheReturn == 1"
                          type="text"
                          size="small"
                          class="blueBug"
                          @click="editHandle(scope.row)"
                          >
<!--                          :disabled="scope.row.wheReturn == 1"-->

                      续约
                  </el-button>
                  <el-button
                          :disabled="scope.row.wheReturn == 1"
                          type="text"
                          size="small"
                          class="redBug"
                          @click="editReturn(scope.row)"
                  >
                      归还车辆
                  </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pageList"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="counts"
        @size-change="handleSizeChange"
        :current-page.sync="page"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
       <el-dialog
               :title="conDate.title"
               :visible.sync="conDate.dialogVisible"
               width="30%"
               :before-close="handleClose"
       >
           <el-form
                   class="demo-form-inline"
                   label-width="100px"
           >

               <el-form-item label="续租天数：">
                   <el-input v-model="conDate.conDay"   placeholder="请输入您要续租的天数" />
               </el-form-item>

           </el-form>
           <span
                   slot="footer"
                   class="dialog-footer"
           >
        <el-button
                size="medium"
                @click="conDate.dialogVisible = false"
        >取 消</el-button>
        <el-button
                type="primary"
                size="medium"
                @click="submitForm()"
        >确 定</el-button>
        <el-button
                v-if="action != 'edit'"
                type="primary"
                size="medium"
                class="continue"
                @click="submitForm('go')"
        > 保存并继续续约 </el-button>
      </span>
       </el-dialog>
  </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="../../plugins/vue/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../../plugins/element-ui/index.js"></script>
    <!-- 引入axios -->
    <script src="../../plugins/axios/axios.min.js"></script>
    <script src="../../js/request.js"></script>
    <script src="../../api/userContract.js"></script>
    <script>
      new Vue({
        el: '#userContract-app',
        data() {
          return {
             input: '',
             counts: 0,
             page: 1,
             pageSize: 10,
             tableData : [],
             dishState : '',
             checkList: [],
              conDate: {
                  'title': '',
                  'dialogVisible': false,
                  'contractId': '',
                  'userName': '',
                  'licensePlate': '',
                  'leaDay': '',
                  'leaPrice': '',
                  'conDay' : '',
                  'conRent': '',
                  'facMoney': '',
                  'wheRenewal': '',
                  'wheReturn': '',
                  sort: ''
              }
          }
        },
        computed: {},
        created() {
          this.init()
        },
        mounted() {
        },
        methods: {
          async init () {
            const params = {
              page: this.page,
              pageSize: this.pageSize,
              name: this.input ? this.input : undefined
            }
            await getSetmealPage(params).then(res => {
              if (String(res.code) === '1') {
                this.tableData = res.data || []
                this.counts = res.total
              }
            }).catch(err => {
              this.$message.error('请求出错了：' + err)
            })
          },
          getImage (image) {
            return `/common/download?name=${image}`
          },
          handleQuery() {
            this.page = 1;
            this.init();
          },

            //续约合同
            editHandle(dat) {
                this.conDate.title = '续约合同'
                this.action = 'edit'
                this.conDate.contractId=dat.contractId
                this.conDate.userName = dat.userName
                this.conDate.licensePlate = dat.licensePlate
                this.conDate.leaDay = dat.leaDay
                this.conDate.leaPrice = dat.leaPrice
                this.conDate.conDay = dat.conDay
                this.conDate.conRent = dat.conRent
                this.conDate.facMoney = dat.facMoney;
                this.conDate.wheRenewal = dat.wheRenewal;
                this.conDate.wheReturn = dat.wheReturn;
                this.conDate.dialogVisible = true
            },
            // 关闭弹窗
            handleClose(st) {
                this.conDate.dialogVisible = false
            },
          //状态更改
          editReturn (row) {
            let params = {}
            if (typeof row === 'string' ){
              params.ids = this.checkList.join(',')
              params.status = row
            } else {
              params.ids = row.contractId
              params.status = row.status ? '0' : '1'
            }
            this.$confirm('确认归还车辆并结束合同?', '提示', {
              'confirmButtonText': '确定',
              'cancelButtonText': '取消',
              'type': 'warning'
            }).then(() => {
              //更改合同状态
              setmealStatusByStatus(params).then(res => {
                if (res.code === 1) {
                  this.$message.success('合同状态已经更改成功！')
                  this.handleQuery()
                } else {
                  this.$message.error(res.msg || '操作失败')
                }
              }).catch(err => {
                  this.$message.error('请求出错了：' + err)
              })
            })
          },
            //数据提交
            submitForm(st) {
                const conDate = this.conDate
                // const valid = (conDate.name === 0 ||conDate.name)  && (conDate.sort === 0 || conDate.sort)
                const  valid = 1
                if(this.action==='edit'){
                 if (valid) {
                    const reg = /^\d+$/

                    if (1) {
                        const params = {
                            contractId: this.contractId,
                            userName:this.userName,
                            licensePlate:this.licensePlate,
                            leaDay:this.leaDay,
                            leaPrice:this.leaPrice,
                            conDay:this.conDay,
                            conRent:this.conRent,
                            facMoney:this.facMoney,
                            wheRenewal:this.wheRenewal,
                            wheReturn:this.wheReturn
                        }
                        editSetmeal(conDate).then(res => {
                            if (res.code === 1) {
                                this.$message.success('续约成功！')
                                this.conDate.dialogVisible = false
                                this.handleQuery()
                            } else {
                                this.$message.error(res.msg || '操作失败')
                            }
                        }).catch(err => {
                            this.$message.error('请求出错了：' + err)
                        })
                    } else {
                        this.$message.error('排序只能输入数字类型')
                    }
                } }else {
                    this.$message.error('请输入分类名称或排序')
                }
            },

          // 全部操作
          handleSelectionChange (val){
            let checkArr = []
            val.forEach((n) => {
              checkArr.push(n.contractId)
            })
            this.checkList = checkArr
          },
          handleSizeChange (val) {
            this.pageSize = val
            this.init()
          },
          handleCurrentChange (val) {
            this.page = val
            this.init()
          }
        }
      })
    </script>
</body>
</html>